<!DOCTYPE html>
<html>
<body>
<canvas id='output' width='400' height='400'></canvas>
<script>
var ctx = document.getElementById("output").getContext("2d");

ctx.font = "italic 12px arial";
ctx.fillStyle = "red";
ctx.fillText("it's", 10, 10);

ctx.font = "bold 30px arial";
ctx.fillStyle = "orange";
ctx.textAlign = "center";
ctx.fillText("SUNNY", 80, 50);

ctx.textBaseline = "top";
ctx.textAlign = "left";
ctx.font = "italic 50px times";
var p = ctx.measureText("outside");

ctx.fillStyle = "purple";
ctx.fillRect(50, 70, p.width, 50);
ctx.strokeStyle = "white";
ctx.strokeText("outside", 50, 70);

ctx.fillStyle = "black";
ctx.font = "italic bold 30px courier";
ctx.fillText("isn't it?", 10, 130);

</script>
</body>
</html>
